import {
  getRoleListApi,
  getCompanyInfoApi,
  delRoleApi
} from '@/api/setting'
import {
  mapGetters
} from 'vuex'
import EditRole from './components/edit-role.vue'
import AssignPermission from './components/assign-permission.vue'
export default {
  components: {
    EditRole,
    AssignPermission
  },
  data() {
    return {
      activeName: 'first',
      query: {
        page: 1, // 当前页码
        pagesize: 5 // 每页显示的条数
      },
      total: 0, // 总记录数
      roleList: [], // 角色列表数据
      companyInfo: {},
      showDialog: false // 控制添加和修改对话框的显示和关闭
    }
  },
  computed: {
    ...mapGetters(['companyId'])
  },
  created() {
    this.getRoleList() // 获取角色列表
    this.getCompanyInfo() // 获取公司信息
  },
  methods: {
    // 角色列表
    async getRoleList() {
      const res = await getRoleListApi(this.query)
      console.log(res)
      this.roleList = res.rows
      this.total = res.total
    },
    // 页码发生改变时触发
    handleCurrentChange(currentPage) {
      this.query.page = currentPage
      this.getRoleList()
    },
    // 获取公司信息
    async getCompanyInfo() {
      // 从vuex中获取公司id
      // const companyId = this.$store.state.user.userInfo.companyId
      // const companyId = this.$store.getters.companyId
      this.companyInfo = await getCompanyInfoApi(this.companyId)
    },
    // 打开对话框的处理函数
    showDialogHandler(id) {
      this.showDialog = true
      // 获取子组件对象
      const editRoleRef = this.$refs.editRoleRef
      // 调用子组件的open方法
      if (id) {
        editRoleRef.open(id)
      }
    },
    // 删除角色
    async delRole(id) {
      //  提示
      try {
        // 确认删除
        await this.$confirm('确认删除该角色吗')
        try {
          // 只有点击了确定 才能进入到下方
          await delRoleApi(id) // 调用删除接口
          this.getRoleList() // 重新加载数据
          this.$message.success('删除角色成功')
        } catch (err) {
          this.$message.error('您没有权限删除')
        }
      } catch (error) {
        // 取消删除
        console.log(error)
      }
    },
    // 分配权限
    assignPer(roleId) {
      this.$refs.assignPerRef.open(roleId)
    }
  }
}
